<template>
  <div>
    <!-- <log-header :flag1="1"></log-header> -->
    <div :class="$style.box">
      <el-row style="margin-bottom:30px;">
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">日期：</span>
          <el-date-picker
            v-model="date"
            style="width:55%;"
            type="daterange"
            placeholder="选择日期范围" @change="handleCurrentChange(1)">
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">客服：</span>
          <el-select v-model="helper.value"  style="width:55%;" clearable placeholder="服务客服" @change="handleCurrentChange(1)">
            <el-option
              v-for="(item,index) in helper.options"
              :key="index"
              :label="item.UserName"
              :value="item.UserName">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="width:29%;text-align:right;float:left;line-height:36px;" >回访结果：</span>
          <el-select v-model="result.value" style="width:55%;" clearable placeholder="回访结果" @change="handleCurrentChange(1)">
            <el-option
              v-for="item in result.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">内容：</span>
          <el-input v-model="content" placeholder="请输入搜索内容" style="width:55%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
        </el-col>
        <el-col :span="4"   :gutter="4">
          <el-button type="primary" @click="handleCurrentChange(1)" style="width:25%;">搜索</el-button>
          <el-button type="primary" @click="addhandel()" style="width:25%;">添加</el-button>
        </el-col>
      </el-row>
      
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="userName"
          label="用户名"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <span :class="$style.click" @click="$router.push({ path: `/vip-manage/detail/${scope.row.userId}/jbxx` })" >{{scope.row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tel"
          label="手机号"
          align="center"
          min-width="130">
          <template slot-scope="scope">
            <span @click="callPhone(scope.row.tel,scope.$index)" style="cursor:pointer"><img src="../../images/phone.png">{{ scope.row.tel && scope.row.tel.substr(0,3)+"****"+scope.row.tel.substr(7) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="kfgroup"
          label="客服组"
          align="center"
          min-width="100">
        </el-table-column>
        <el-table-column
          label="服务客服"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <span v-if="userInfo.power != 3" :class="$style.click" @click="kfDialog(scope.$index)" style="cursor:pointer">{{ scope.row.kfname }}</span>
            <span v-if="userInfo.power == 3">{{ scope.row.kfname }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="danhaoid"
          label="受理单号"
          align="center"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="hftime"
          label="计划时间"
          align="center"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="beizhu"
          label="备注"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <span :class="$style.click" @click="remarkDialog(scope.row.beizhu)">查看内容</span>
          </template>
        </el-table-column>
        <el-table-column
          label="回访结果"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <span :class="scope.row.jieguo === '逾期了' ? $style.red : ''">{{scope.row.jieguo}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="a9"
          label="通话录音"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.recordfile">
              <a 
              :href="scope.row.deviceType===0?('http://wznb.wsloan.com:8888/telrecord/main/listentovoice?date=/media/sda/voice/'+ (scope.row.recordfile ? scope.row.recordfile.slice(0, 8) :'' )+ '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '') +'.wav'): ('http://report.wsloan.com:8888/record/'+scope.row.recordfile)"
               target="_blank" 
              :class="$style.click">播放</a>
                <a :href="'http://122.228.132.78:1980/main/download?path=/media/sda/voice/'+(scope.row.recordfile? scope.row.recordfile.slice(0, 8) :'')  + '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '')+'.wav'" :class="$style.click" v-if="scope.row.recordfile">下载</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="a10"
          label="操作"
          align="center"
          min-width="50">
          <template slot-scope="scope">
            <span :class="$style.click" @click="changeDialog(scope.$index)">改期</span>
            <span :class="$style.click" @click="cancelDialog(scope.row.id)" v-if="power < 3">取消</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 30px 0;float:right;">
        <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="total">
        </el-pagination>
      </div>
      <el-dialog title="备注" :visible.sync="dialogTableVisible">
        {{remarkContent}}
      </el-dialog>
      <el-dialog title="修改客服" :visible.sync="dialogKfVisible" size="tiny">
          <el-select v-model="helper1.value" clearable placeholder="服务客服">
            <el-option
              v-for="(item,index) in helper1.options"
              :key="index"
              :label="item.UserName"
              :value="item.UserName">
            </el-option>
          </el-select>
          <el-button type="primary" @click="updatekf">确 定</el-button>
      </el-dialog>
      <el-dialog  :visible.sync="dialogFormVisible" size="tiny">
        <div>
          <div>
            计划时间：
            <el-date-picker
              v-model="changeData.date"
              type="datetime"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div style="margin: 30px 0;">
            <span style="float:left">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              style="width:400px;"
              v-model="changeData.content">
            </el-input>
          </div>
        </div>
        <div slot="footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateBeizhu">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog  :visible.sync="cancel.dialogVisible" size="tiny">
        <div>
          <div style="margin: 30px 0;">
            <span style="float:left">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              style="width:400px;"
              v-model="cancel.content">
            </el-input>
          </div>
        </div>
        <div slot="footer">
          <el-button @click="cancel.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitCancelContent">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新增回访计划" :visible.sync="add.dialog">
        <el-row>
          计划时间：<el-date-picker
              v-model="add.hftime"
              type="datetime"
              placeholder="选择日期">
            </el-date-picker>
        </el-row>
        <el-row style="margin: 30px 0;">
          电话：<el-input v-model="add.tel" placeholder="请输入搜索内容" style="width:200px;"></el-input>
        </el-row>
        <el-row style="margin: 30px 0;">
          备注：<el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              style="width:400px;"
              v-model="add.beizhu">
            </el-input>
        </el-row>
        <el-row>
          <el-button type="primary" @click="addSave">确 定</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { dateFormat } from 'vux'
import LogHeader from '../../components/header.vue'
import {callout} from '../../../../config/mixin'
export default {
  components: {
    LogHeader
  },
  mixins:[callout],
  data() {
    const { power } = this.$store.getters.getUserInfo
    return {
      // 添加参数
      power,
      cancel:{
        dialogVisible:false,
        content:'',
        curId:'',
      },
      //
      date:[
        dateFormat(new Date(), 'YYYY-MM-DD'),
        dateFormat(new Date(), 'YYYY-MM-DD')
      ],
      helper:{
        options: [],
        value: ''
      },
      helper1:{
        options: [],
        value: ''
      },
      result:{
        options:[{
          value: '未执行',
          label: '未执行'
        },{
          value: '已执行',
          label: '已执行'
        },{
          value: '已取消',
          label: '已取消'
        },{
          value: '逾期了',
          label: '逾期了'
        }],
        value: ''
      },
      content: '',
      tableData:[{
        a1:'1',
        a2:'2',
        a3:'3',
        a4:'4',
        a5:'5',
        a6:'6',
        a7:'7',
        a8:'8',
        a9:'9',
        a10:'10'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogKfVisible: false,
      remarkContent:"",
      changeData:{
        date:'',
        content: '',
      },
      page: 1,
      pageSize: 10,
      total: null,
      updateBeizhuIndex: null,
      index: 0,
      kfindex: 0,
      add: {
        dialog: false,
        tel: '',
        hftime: '',
        beizhu: ''
      }
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.getUserInfo
    },
    kf () {
      return this.$store.getters.getKf
    }
  },
  methods: {
    // 添加方法
    cancelDialog(id){
      // 每次对内容部分进行初始化
      this.cancel.content = ''

      this.cancel.dialogVisible = true
      this.cancel.curId = id
    },
    async submitCancelContent(){
      const {content,curId} = this.cancel
      if(content=== ''){
        this.$toast({
          message:'请填写取消的备注内容'
        })
        return
      }
      try{
        const {data} = await this.$get(this,{
          api:'ajaxapi/quxiaoHfjl.do',
          data:{
            id:curId,
            rejectreason:content
          }
        })
        if(data.state === 0 && data.content){
          this.$toast({
            message:'提交成功'
          })
          this.getTableData(this.page)
          this.cancel.dialogVisible = false
          return
        }
        if(data.message){
          this.$warn('ajaxapi/quxiaoHfjl.do:',data.message)
        }
      }catch(e){
        this.$warn('ajaxapi/quxiaoHfjl.do',e.message)
      }
    },
    //
    addhandel () {
      this.add.dialog = true;
    },
    async addSave () {
      if (new RegExp('^0*((13[0-9])|(15[^,\\D])|(17[0-9])|(147)|(18[0-9])|(19[0-9]))\\d{8}$').test(this.add.tel) === false) {
          return this.$warn('请输入正确的手机号码')
      }
      let {data} = await this.$get(this,{api:'ajaxapi/addHfjl.do',data: {
          sessionId: this.userInfo.sessionId,
          tel: this.add.tel,
          hftime: dateFormat(this.add.hftime, 'YYYY-MM-DD HH:mm:ss'),
          beizhu: this.add.beizhu,
        }
      })
      if (data.state === 0) {
        this.add.dialog = false;
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableData(val)
    },
    remarkDialog (data) {
      this.dialogTableVisible = true;
      this.remarkContent = data;
    },
    changeDialog (index) {
      this.dialogFormVisible = true;
      this.updateBeizhuIndex = index;
    },
    async getTableData (page=1) {
      if(!this.date){
        this.$toast({
          message:'请务必填写日期'
        })
        return
      }
      try{
        let {data} = await this.$get(this,{api:'ajaxapi/getHfjl.do',data: {
            sessionId: this.userInfo.sessionId,
            kfname: this.helper.value,
            sTime: this.date && dateFormat(this.date[0], 'YYYY-MM-DD'),
            eTime: this.date && dateFormat(this.date[1], 'YYYY-MM-DD'),
            jieguo: this.result.value,
            userName: this.content,
            page,
            pageSize: this.pageSize,
          }
        })
        if (data.state === 0) {
          this.tableData = data.content.data;
          this.total = data.content.num;
        } else {
          this.$toast({
            message: data.message
          })
        }
      }catch(e){
        this.$warn('系统接口ajaxapi/getHfjl.do报错')
      }
    },
    async updateBeizhu () {
      if(this.changeData.date == '' || this.changeData.content == '') {
        this.$toast({
          message: '不能为空'
        })
        return false;
      }
      let {data} = await this.$get(this,{api:'ajaxapi/addHfjl.do',data: {
          sessionId: this.userInfo.sessionId,
          tel: this.tableData[this.updateBeizhuIndex].tel,
          userName: this.tableData[this.updateBeizhuIndex].userName,
          hftime: dateFormat(this.changeData.date, 'YYYY-MM-DD HH:mm:ss'),
          beizhu: this.changeData.content,
          danhaoid: this.tableData[this.updateBeizhuIndex].danhaoid,
        }
      })
      if (data.state === 0) {
         this.getTableData(this.page)
      } else {
        this.$toast({
          message: data.message
        })
      }
      this.dialogFormVisible = false
      this.changeData.date = '',
      this.changeData.content = ''

    },
    callPhone (phone,index) {
      this.index = index;
      // 判断是省内，还是省外
      this.$get(this,{api:'ajaxapi/isFouWz.do',data: {
          mobile: phone,
          yhm: this.userInfo.usertel
        }
      }).then(({data})=>{
        if (data.state === 0) {
          this.$confirm({
            message: '确认拨打？',
            success: ()=>{
              this.callout(data.content,1)
            }
          })
        }
      })
    },
    async updateResult () {
      let {data} = await this.$get(this,{api:'ajaxapi/updateHfjl.do',data: {
          id: this.tableData[this.index].id
        }
      })
      if (data.state === 0) {
        this.tableData[this.index].jieguo = '已执行'
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    kfDialog (index) {
      this.kfindex = index;
      this.dialogKfVisible = true;
    },
    async updatekf () {
      let {data} = await this.$get(this,{api:'ajaxapi/uphuifanKf.do',data: {
          id: this.tableData[this.kfindex].id,
          kfname: this.helper1.value,
        }
      })
      this.dialogKfVisible = false;
      if (data.state === 0) {
        this.tableData[this.kfindex].kfname = this.helper1.value
      } else {
        this.$toast({
          message: data.message
        })
      }
    }
  },
  mounted () {
    this.helper.options = this.kf;
    this.helper1.options = this.kf;
    this.getTableData();
  }
}
</script>
<style lang="scss" module>
 .box {
    background: #fff;
    padding: 20px;
    border: 1px solid #dddfe6;
 }
 .click {
   color: #5394fc;
   text-decoration: underline;
   cursor: pointer;
 }
 .red {
   color: red;
 }
</style>

